<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="https://code.highcharts.com/modules/sankey.js"></script>
    <script src="https://code.highcharts.com/modules/dependency-wheel.js"></script>
    <title>Title</title>
    <style>
        .highcharts-data-table table {
            min-width: 320px;
            max-width: 660px;
            margin: 1em auto;
        }
    </style>
</head>
<body>
<div id="container"></div>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const chart = Highcharts.chart('container', {
            chart: {
                responsive: true
            },
            title: {
                text: 'Highcharts Dependency Wheel'
            },
            credits: {
                enabled: false
            },
            legend: {
                enabled: true,
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'middle',
                labelFormat: '{from} -> {to}'
            },
            plotOptions: {
                dependencywheel: {
                    showInLegend: true,
                    colorByPoint: true,
                    legendType: 'point',
                    connectorAllowed: true
                }
            },
            series: [{
                name: 'Category1',
                showInLegend: true,
                colorByPoint: true,
                nodes: [{
                    id: 'Spain',
                    name: 'SPI',
                    colorIndex: 0
                }, {
                    id: 'France',
                    name: 'FRA',
                    colorIndex: 1
                }, {
                    id: 'Germany',
                    name: 'GER',
                    colorIndex: 2
                }, {
                    id: 'United Kingdom',
                    colorIndex: 4
                }, {
                    id: 'Italy',
                    colorIndex: 5
                }, {
                    id: 'Metherlands',
                    colorIndex: 6
                }],
                keys: ['from', 'to', 'weight'],
                data: [
                    ['Spain', 'France', 5],
                    ['Spain', 'United Kingdom', 1],
                    ['Spain', 'Italy', 8],
                    ['Spain', 'Netherlands', 1],
                    ['France', 'Germany', 2],
                    ['France', 'United Kingdom', 5],
                    ['France', 'Italy', 3],
                    ['Germany', 'Spain', 1],
                    ['United Kingdom', 'Germany', 3],
                    ['Italy', 'United Kingdom', 2]

                ],
                type: 'dependencywheel',
                dataLabels: {
                    color: 'black',
                    textPath: {
                        enabled: true,
                        attributes: {
                            dy: 5
                        }
                    },
                    distance: 10
                },
                size: '95%'
            }]

        });
    });

</script>
</body>
</html>